<template>
    <el-card class="wly-page data-look">
        <div class="main-content" v-show="isShowSelfData && !isSelfData">
            <group @select-table="addTableType" v-if="isShowSelfData && !isSelfData"></group>
            <div class="tableBox">
                <div class="top-nav"  v-if="isshowNavgation && !isSelfData">
                    <div class="tab">
                          <span v-for="(item,index) in tabList" :class="[(index+1)==activeIndex?'active':'']"
                                @click="handleSelect(index+1)">{{item.label}}</span>
                    </div>
                    <div class="btn-group">
                        <el-button v-if="makeDataObj.type =='14' && isShowTable"  class="el-icon-plus" type="primary" size="small" @click="showAddRow">新增列</el-button>
                    </div>
                </div>
                <div v-if="activeIndex === '1' && makeDataObj.type =='14' && isShowTable" style="border: 1px solid #D8DCE5; width: 100%;height: 100px;overflow-y: auto">
                    <div v-for="(item,index) in addRowList" class="addRowContent"  @mouseover="handleMouseOver(index)" @mouseout="handleMouseLeave(index)" style="margin-top: 20px">
                        <el-row>
                            <el-col :span="19">
                                <div style="margin: 10px 20px">{{item.name}}</div>
                            </el-col>
                            <el-col :span="5">
                                <div v-show="seen && index === current">
                                    <i class="el-icon-edit" @click="editAddRow(item)"></i>
                                    <i class="el-icon-delete" @click="deleteAddRow(item)"></i>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="isShowTable && makeDataObj" v-loading="isShowLoading" :class="(activeIndex === '1' && makeDataObj.type =='14' && isShowTable) ? 'tableHeight1': 'tableHeight2'">
                    <ATableReady :tableData ="tableData.records" :colList="colList" @complete="showtable"
                                 :isEditHeader="true" @getData ='showtable' :recordNumber="tableData.recordNumber"
                                 :height="(activeIndex === '1' && makeDataObj.type =='14' && isShowTable) ? height1 : height2"></ATableReady>
                </div>
                <!-- 关联视图 -->
                <elevance-view @closeElevance="closeElevance" :treeData="treeData" :makeType="makeType" v-if='makeDataObj && isShowview && activeIndex=="3"' :makeDataObj="makeDataObj"></elevance-view>
                <add-row ref="addRow" @qryTable="updTable"></add-row>
            </div>
        </div>
        <!--新增表编辑页-->
        <edit-table-data ref='editTableData' :tableDataList="tableData" @showSelfData="showSelfData" v-if="isEditTableData"></edit-table-data>
        <!--实体表-->
        <get-data-by-table :tableDataList="tableData" @showSelfData="showSelfData" v-if="isTableData"></get-data-by-table>
        <!--sql-->
        <get-data-by-sql ref='editSqlData' :tableDataList="tableData" @showSelfData="showSelfData" v-if="isSqlData"></get-data-by-sql>
        <!-- 自助数据集 -->
        <data-gather :tableDataList="tableData" @showSelfData="showSelfData" :makeDataObj="makeDataObj" :makeType="makeType" v-if="isSelfData && makeDataObj"></data-gather>
    </el-card>

</template>
<script>

    import {GET_DATAINFO, MGNDIRQUERY1, DELETE_ADDROW, SEARCH_ADDROW_TREE, QUERY_ADDROW,QUERY_EXIST_NICKNAME} from '@api/url' // 引入定义的接口码
    import dataTable from './scopeedcomponents/DataTable' // 数据预览
    import group from '@/components/group/group.vue' // 增删该查表、分组
    import dataGather from './scopeedcomponents/DataGather' // 自助数据集
    import ElevanceView from './scopeedcomponents/ElevanceView' // 关联视图关系维护
    import AddRow from './scopeedcomponents/AddRow'// 新增列
    import getDataByTable from '@/views/dataimp/getdata/GetDataByTable'// 添加表视图和sql视图
    import getDataBySql from '@/views/dataimp/getdata/GetDataBySql'// 新增sql
    import editTableData from '@/views/dataimp/getdata/EditTableData'
    import ajax from '@api/ajax'
    import VHeader from '../../components/VHeader/VHeader'
    import ATableReady from "../../components/AInitPage/ATable/ATableReady.vue";
    export default {
        data () {
            return {
                // elevanceData:{},
                tabList:[{label:'数据预览'}, {label:'血缘分析'}, {label:'关联视图'}],
                makeDataObj: {},
                makeType: 'add', // 默认新增
                isshowNavgation: true,
                isShowLoading: false,
                selectMenuData: {}, // 选择的元数据表
                activeIndex: '1',
                treeData: null,
                height1: 500,
                height2: window.innerHeight - 300,
                isShowTable: true, // 数据预览是否显示
                isSelfData: false, // 是否选择数据
                isShowSelfData: true, // 是否显示分组关系,
                isShowview: true, // 是否显示关联视图
                isSqlData: false, // 是否显示Sql
                isTableData: false, // 是否显示实体表
                isEditTableData: false,
                elevanceView: false,
                selectType: '1', // 选中的表类型 1：数据预览 2血缘分析 3关联视图
                tableTitle: '表格标题',
                menuData: {}, // 选中的数据
                tableData: {}, // 数据预览数据
                addRowList: [], // 保存新增列信息
                current: 0,
                seen: false,
                colList:[],
            }
        },
        created () {
            this.$storeSave.state.addelevanceObj = {}// 将新增数据置空
            this.$storeSave.state.updateObj = {}// 将将要修改的数据置空
            this.$storeSave.state.selectMenuData = {} // 将选择的数据置空
            this.getTableData()
        },
        mounted () {
            this.getTree()
        },
        // 注册子组件
        components: {
            ATableReady,
            VHeader,
            dataTable,
            group,
            dataGather,
            ElevanceView,
            AddRow,
            getDataByTable,
            getDataBySql,
            editTableData
        },
        methods: {
            // 关闭关联视图页面
            closeElevance () {
                this.isShowSelfData = true
                this.activeIndex = '1'
                // 展示数据预览
                this.isShowTable = true
                this.isShowview = false
                this.isshowNavgation = true
            },
            // 新增列保存
            addline () {
                console.log('新增列保存')
            },
            // 回到该页面查询数据预览数据，关闭其他视图
            showSelfData () {
                // 子组件调用
                this.isShowTable = true// 数据预览
                this.isshowNavgation = true// 导航显示
                this.isSelfData = false
                this.isSqlData = false
                this.isTableData = false
                this.isShowSelfData = true
                this.isEditTableData = false
                this.activeIndex = '1'
                this.getTableData()// 数据预览查询
            },
            getTree () {
                let param = {
                    parentId: '0',
                    menuId: '0', // 0查询全树，否则查询该节点下树
                    type: '1', // 1-数据集，2-目录，3-菜单，4-数据连接，5-外部连接
                    optMode: '1'
                }
                this.$http.post(MGNDIRQUERY1, param).then(res => {
                    console.log('查询目录TREE成功')
                    console.log(res.status)
                    console.log(res.data.data)
                    if (res.data.code == '200' && res.data.data.length > 0) {
                        this.treeData = res.data.data
                    } else {
                        this.$alert(res.data.message, '提示', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        })
                    }
                }).catch(err => {
                    this.$alert('查询数据集失败', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {

                        }
                    })
                })
            },
            getTableData (data) {
                let _this = this
                // 查询table数据预览
                if (_this.makeDataObj.menuId) {
                    _this.isShowLoading = true
                    var condition = {
                        'optMode': '1',
                        'modelId': this.makeDataObj.menuId,
                        pageNo: 1,
                        pageSize: 15
                    }
                    if (data) {
                        condition.pageNo = data.pageNo
                        condition.pageSize = data.pageSize
                    }
                    _this.colList =[]
                    ajax.post(GET_DATAINFO, condition).then(res => {
                        ajax.post(QUERY_EXIST_NICKNAME,condition).then(result => {

                            _this.tableData = res.data.page
                            let fieldsOptions=[];

                            //处理左侧表头相关信息
                            let fieldsList= result.data||[];//[{colName:"EXP_DATE",modelId:"320861890412544",nickName:"EXP_DATE大幅度发"}]
                            for (let filedName in   _this.tableData.records[0]) {
                                let index = fieldsList.findIndex(item=>item.colName==filedName);//找到字段名所在下标
                                if(index>-1){
                                    fieldsOptions.push(fieldsList[index]);
                                }else{
                                    fieldsOptions.push({colName:filedName,modelId:this.makeDataObj.menuId,nickName:filedName});
                                }
                            }

                            _this.colList=fieldsOptions;
                            if (_this.makeDataObj.type === '14') {
                                _this.height = window.innerHeight - 250
                            } else {
                                _this.height = window.innerHeight - 150
                            }
                            _this.isShowLoading = false
                        }).catch(err => {
                            _this.isShowLoading = false
                            _this.tableData = {}
                            _this.$alert(err.data.message, '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                }
                            })
                        })
                    }).catch(err => {
                        _this.isShowLoading = false
                        _this.tableData = {}
                        _this.$alert(err.data.message, '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        })
                    })
                }
            },
            // 根据选择的表类型显示什么组件
            showtable (param) {
                console.log('选择的新增数据----子组件传到父')
                console.log(param)
                this.getTableData(param)
            },
            decideIndex () {
                // 根据展示的页面查询该展示的内容
                if (this.activeIndex == '1') {
                    // 数据预览
                    this.isShowTable = true
                    this.isShowSelfData = true// 隐藏关联视图
                    this.isshowNavgation = true// 导航显示
                    this.getTableData()// 数据预览查询
                } else if (this.activeIndex == '2') {
                    // this.isShowSelfData=false//隐藏关联视图
                    this.isShowTable = true
                    this.isshowNavgation = true// 导航显示
                    console.log('this.activeIndex', this.activeIndex)
                    // 查询血缘分析接口
                } else {
                    console.log('this.activeIndex', this.activeIndex)
                    // 关联关系
                    // this.queryElevanceViews()
                    this.isShowTable = false
                    this.isshowNavgation = true// 导航显示
                    this.isShowSelfData = true// 显示关联视图
                    this.isShowview = true
                }
            },
            addTableType (param, type) {
                // param主表元素
                this.makeDataObj = param
                // type:add, update query
                this.makeType = type
                console.log(param)
                console.log('传过来的数据')
                console.log(type)
                if (type == 'query') {
                    // 根据展示的页面查询该展示的内容
                    if (param.type === '14') {
                        this.queryAddRow(param)
                    }
                    this.decideIndex()
                } else if (type == 'update') {
                    // 去查询属于什么表
                    // 点击编辑跳转过来的
                    console.log('点击编辑跳转过来的')
                    this.updateShowTable(param)
                } else {
                    // 新增来的
                    console.log('tableTitle===========自助数据集')
                    console.log(param.makeData)

                    let type = this.$storeSave.state.newChild.type
                    console.log('新建的type', type)
                    if (type == '14') {
                        // this.menuData=param.makeData
                        this.isShowTable = false
                        this.isSelfData = true
                        this.isShowSelfData = true
                        this.isShowview = false// 关联关系
                    } else if (type == '11') {
                        // this.menuData=param.makeData
                        this.isShowTable = false
                        this.isshowNavgation = false
                        this.isSqlData = true
                        this.isSelfData = false
                        this.isShowSelfData = false
                    } else if (type == '13') {
                        // this.menuData=param.makeData
                        this.isshowNavgation = false
                        this.isShowTable = false
                        this.isSelfData = false
                        this.isTableData = true
                        this.isShowSelfData = false
                    }
                }
            },
            updateShowTable (makeobj) {
                // type:11-sql,12-EXCEL,13-数据库表，14-自助数据集,2-目录，3-菜单，4-数据连接，5-外部连接
                if (makeobj.type == '14') {
                    // 默认展示自助数据集
                    this.isSqlData = false
                    this.isShowTable = false//
                    this.isTableData = false// 是否显示实体表
                    this.isShowSelfData = false// 关联视图
                    this.isshowNavgation = false
                    this.isEditTableData = false
                    this.isSelfData = true// 自助数据集
                } else if (makeobj.type == '11') {
                    this.isShowTable = false
                    this.isshowNavgation = false
                    this.isSqlData = true
                    this.isSelfData = false
                    this.isShowSelfData = false
                    // 传入需要的参数反显数据
                    this.$nextTick(() => {
                        this.$refs.editSqlData.editSqlData(makeobj)
                    })
                } else if (makeobj.type == '13') {
                    this.isshowNavgation = false
                    this.isShowTable = false
                    this.isSelfData = false
                    this.isEditTableData = true
                    this.isShowview = false
                    this.isShowSelfData = false
                    // 传入需要的参数反显数据
                    this.$nextTick(() => {
                        this.$refs.editTableData.queryDatabaseCon(makeobj)
                    })
                }
            },
            // 切换导航菜单
            handleSelect (index) {
                console.log('------------',index)
                this.activeIndex = index
                //  展示对应的页面
                this.decideIndex()
            },
            // 新增列
            showAddRow () {
                this.$refs.addRow.openDialog(this.$storeSave.state.selectMenuData.menuId)
            },
            // 新增列
            updTable (val) {
                if (val.pageMode === 'EDIT') {
                    this.addRowList.forEach(item => {
                        if (item.fieldId === val.data.fieldId) {
                            item.name = val.data.name
                        }
                    })
                } else {
                    this.addRowList.push({
                        name: val.name,
                        fieldId: val.fieldId
                    })
                }
                this.getTableData()
            },
            // 控制鼠标进入事件
            handleMouseOver (index) {
                this.seen = true
                this.current = index
            },
            // 控制鼠标移除事件
            handleMouseLeave (index) {
                this.seen = false
                this.current = null
            },
            // 编辑新增列
            editAddRow (val) {
                let param = {
                    modelId: this.$storeSave.state.selectMenuData.menuId,
                    fieldId: val.fieldId,
                    name: val.name,
                    type: '1'
                }
                ajax.post(SEARCH_ADDROW_TREE, param).then(res => {
                    this.$refs.addRow.editDialog(this.$storeSave.state.selectMenuData.menuId, res.data.addedColumn)
                })
            },
            // 删除新增列
            deleteAddRow (val) {
                let param = {
                    fieldId: val.fieldId
                }
                ajax.post(DELETE_ADDROW, param).then(res => {
                    this.addRowList.forEach((item, index) => {
                        if (item.fieldId === param.fieldId) {
                            this.addRowList.splice(index, 1)
                        }
                    })
                    this.getTableData()
                })
            },
            // 查询新增列
            queryAddRow (val) {
                let param = {
                    modelId: val.menuId
                }
                ajax.post(QUERY_ADDROW, param).then(res => {
                    this.addRowList = res.data
                })
            }
        }
    }
</script>

<style lang="stylus" >
    .main-content{
        display: flex;
        justify-content: space-between;
        height: 100%;
        .tableBox {
            height: 95%
            width calc(100% - 300px)
        }
        .top-nav{
            display flex
            justify-content space-between
            padding-bottom  10px
            .tab{
                display: flex
                justify-content flex-start
                span {
                    padding: 4px 14px;
                    border-radius 40px
                    transition all.3s
                    font-size: 15px;
                    margin-left: 10px;
                    cursor pointer
                    &.active{
                        background-color #FFEBEB
                        color #F95160
                    }
                }
            }
        }
    }
    .data-look {
        height: 100%;
        .el-card__body {
            height: 100%;
            .el-row {
                height: 95%;
                .el-col{
                    height: 100%;
                    .groupBox {
                        // margin-top: 10px;
                        border: 1px solid #D8DCE5;
                        height: 95%
                    }

                }

            }

            .addRowContent {
                border: 1px solid #D8DCE5;
                width: 150px;
                height: 50px;
                position: relative;
                margin-left: 20px;
                float: left;
            }
        }

        /*字体颜色：*/
        .el-aside {
            color: #f04959;
        }

    }
    /*修改子菜单的背景色：*/
    .el-menu-item {
        border-radius: 0;
        background-color: white !important;
    }

    /*鼠标悬浮时，子菜单的样式：*/
    .el-menu-item:hover{
        border-radius: 0;
        outline: 0 !important;
        color: #409EFF !important;
    }

    .el-menu-item.is-active {
        color: white !important;
        background: #f04959 !important;
        border-radius: 0 !important;
    }
    /*鼠标悬浮时，主菜单的样式：*/
    .el-submenu__title:focus, .el-submenu__title:hover{
        outline: 0 !important;
        color: white !important;
        background: #f04959 !important;
    }
    .tableHeight1{
        height: 82%;
    }
    .tableHeight2{
        height: 95%;
    }

</style>
